<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test Grid DnD on Touch Devices</title>
		<meta name="viewport" content="width=570">
		<style>
			@import "../../../dojo/resources/dojo.css";
			/* need a theme for some dnd styles (e.g. before/after indicators).
			   Using tundra because claro has a silly dojoDndItemBefore/After bug
			*/
			@import "../../../dijit/themes/tundra/tundra.css";
			@import "../../css/skins/tundra.css";
			
			.clear { clear: both; }
			
			.dojoDndItem { padding: 0; } /* override dijit.css */
			
			.gridcontainer {
				float: left;
				width: 40%;
				padding: 0 5%;
			}
			
			.dgrid {
				height: 400px;
			}
			
			/* styles for handles in 2nd grid */
			.handleColumn {
				width: 3em;
			}
			.dgrid-content .handleColumn {
				background-color: #eee;
				border: 1px dotted #999;
			}
		</style>
		<script src="../../../dojo/dojo.js"
			data-dojo-config="async: true"></script>
		<script>
			require(["dgrid/OnDemandGrid", "dgrid/extensions/DnD", "put-selector/put",
				"dojo/_base/declare", "dojo/_base/lang", "dgrid/test/data/base", "dojo/domReady!"],
			function(Grid, DnD, put, declare, lang){
				var DnDGrid = declare([Grid, DnD]);
				
				// Create a custom data array based on testOrderedData, but looping
				// several times to create enough items to reasonably test node removal,
				// and also adding an extra item to test item-specific DnD types.
				var orderedData = [],
					len = testOrderedData.length,
					i, j, obj;
				
				for(i = 0; i < 5; i++){
					for(j = 0; j < len; j++){
						obj = lang.clone(testOrderedData[j]);
						obj.order = obj.id = i * len + j + 1;
						orderedData.push(obj);
					}
				}
				
				function getCommonProperties(){
					return {
						bufferRows: 5,
						farOffRemoval: 400,
						store: createOrderedStore(orderedData, { idProperty: "id" }),
						getObjectDndType: function(item){
							return [item.type ? item.type : this.dndSourceType];
						}
					};
				}
				
				// Note: testOrderedStore hard-wires sorting anyway,
				// so leaving sort disabled on columns in this grid.
				var grid = window.grid = new DnDGrid(lang.mixin(getCommonProperties(), {
					columns: [
						{ label: "Name", field:"name", sortable: false }
					],
					touchesToScroll: 2,
					dndSourceType: "grid-row"
				}), "grid");
				
				var gridWithHandles = window.gridWithHandles = new DnDGrid(lang.mixin(getCommonProperties(), {
					columns: [
						{
							label: "Drag",
							className: "handleColumn",
							renderCell: function(object, data, cell){
								cell.className += " dojoDndHandle";
							},
							sortable: false
						},
						{ label: "Name", field: "name", sortable: false }
					],
					dndSourceType: "gridWithHandles-row",
					dndParams: {
						withHandles: true
					}
				}), "gridWithHandles");
			});
		</script>
	</head>
	<body class="tundra">
		<p>This page contains grids with DnD set up for touch devices.</p>
		<div class="gridcontainer">
			<h2>no handles, 2-finger scroll</h2>
			<div id="grid"></div>
		</div>
		<div class="gridcontainer">
			<h2>handles, 1-finger scroll elsewhere</h2>
			<div id="gridWithHandles"></div>
		</div>
	</body>
</html>
